import React,{useState,useEffect} from 'react'
import './modal.css'
/**
 * 
 * @param {visible boolean} props  控制显示 
 * @returns 
 */
const Modal = (props) => {
    const [visible,setVisible] = useState(false)
    const { visible:show,children, title  } = props
    const {onClose ,onConfirm} = props
    useEffect(()=>{
        // console.log('============')
        setVisible(show)
    },[show])
    const closeModal=()=>{
        console.log('想要关闭吗?')
        setVisible(false)
        onClose && onClose()
    }
    const confirm=()=>{
        console.log('想要确定吗?')
        setVisible(false)
        onConfirm && onConfirm()
    }
    const maskClick = ()=>{
        setVisible(false)
        onClose && onClose()
    }
    return (
        visible && <div className="modal-wrapper">
        <div className="modal">
            <div className="modal-title">{title}</div>
            <div className="modal-content">{children}</div>
            <div className="modal-operator">
                <button 
                onClick={closeModal}
                className="modal-operator-close">取消</button>
                <button 
                onClick={confirm}
                className="modal-operator-confirm">确定</button>
            </div>
        </div>
        <div className="mask" onClick={maskClick}></div>
    </div>
    )
}

export default Modal